<!-- <slot></slot> <slot></slot><template #default>
      <p>This is some slot content</p>
    </template> 
    {
        label: '任务名称',
        type: 'input',
        tips: '请输入任务名称',
        required: true,
        disabled: true
        data: null
    }
-->
<template>
    <div class="container-header">
        <div class="container-header-tr">
            <slot></slot>
            <!-- <div v-for="item in props.rows">
                <template v-if="item.type === 'input'">
                    <span class="s1"
                        ><span v-if="item.required" class="required">*</span
                        >{{ item.label }}</span
                    >
                    <a-input
                        :disabled="item.disabled"
                        v-model="item.data"
                        :placeholder="item.tips"
                    />
                </template>
            </div>
            <slot></slot> -->
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const props = defineProps({
    rows: Array
});
// const state = reactive({
//     rows: [
//         {
//             label: '',
//             type: 'input'
//         }
//     ]
// });
</script>
<style lang="less" scoped>
.container-header {
    .container-header-tr {
        display: flex;
        align-items: center;
    }
    .container-header-tr > div {
        margin-right: 20px;
        display: flex;
        align-items: center;
        .s1 {
            color: #4e5969;
            margin-right: 10px;
            .required {
                color: red;
                position: relative;
                top: 2px;
                margin-right: 2px;
            }
        }
        .arco-input-wrapper {
            width: inherit;
        }
    }
}
</style>
